---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import { getProductsFromDB, getPriceDropsFromDB } from '../../lib/products';
import type { Sneaker } from '../../data/mock'; // Type-only import, no runtime dependency

const collectionMeta: Record<string, { title: string; description: string; emoji: string }> = {
  'sale': { title: 'Sale', description: 'De beste sneaker deals met meer dan 15% korting' },
  'trending': { title: 'Trending', description: 'De populairste sneakers van dit moment' },
  'new-arrivals': { title: 'Nieuw Binnen', description: 'De nieuwste sneakers, net toegevoegd' },
  'price-drops': { title: 'Prijsdalingen', description: 'Sneakers die recent in prijs zijn gedaald' },
  'bestsellers': { title: 'Bestsellers', description: 'De best verkochte sneakers' },
  'under-100': { title: 'Onder €100', description: 'Betaalbare sneakers onder de honderd euro' },
};

const { slug } = Astro.params;
const spSize = Astro.cookies.get('sp_size')?.value || undefined;
const meta = collectionMeta[slug!] || { title: slug, description: '' };

let collectionProducts: Sneaker[] = [];
switch (slug) {
  case 'sale':
  case 'price-drops':
    collectionProducts = await getPriceDropsFromDB(24, spSize);
    break;
  case 'trending':
  case 'bestsellers':
    collectionProducts = await getProductsFromDB({ limit: 24, orderBy: 'popular', size: spSize });
    break;
  case 'new-arrivals':
    collectionProducts = await getProductsFromDB({ limit: 24, orderBy: 'newest', size: spSize });
    break;
  case 'under-100':
    collectionProducts = await getProductsFromDB({ limit: 24, orderBy: 'price_asc', size: spSize });
    collectionProducts = collectionProducts.filter(s => s.lowestPrice < 100);
    break;
  default:
    collectionProducts = await getProductsFromDB({ limit: 24, size: spSize });
}
---

<Layout title={`${meta.title} — SneakerPicks`} description={meta.description}>
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: meta.title,
    description: meta.description,
    url: `https://sneakerpicks.nl/collecties/${slug}`,
    mainEntity: {
      "@type": "ItemList",
      numberOfItems: collectionProducts.length,
      itemListElement: collectionProducts.slice(0, 20).map((s, i) => ({
        "@type": "ListItem",
        position: i + 1,
        url: `https://sneakerpicks.nl/sneakers/${s.slug}`,
        name: `${s.brand} ${s.name}`,
      })),
    },
  })} />
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: "https://sneakerpicks.nl/" },
      { "@type": "ListItem", position: 2, name: meta.title },
    ],
  })} />
  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <div class="mb-8">
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">
        <span>{meta.emoji}</span> {meta.title}
      </h1>
      <p class="mt-2 text-text-secondary">{meta.description}</p>
      <p class="mt-1 text-sm text-text-muted">{collectionProducts.length} sneakers</p>
    </div>

    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {collectionProducts.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>

    {collectionProducts.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Geen sneakers gevonden in deze collectie</p>
      </div>
    )}
  </section>
</Layout>